<!-- /*
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
*/ -->
<template>
  <div class="data_right fr">
    <div class="right_top">
      <!--/*右边第一部分*/-->
      <div class="right_info public">
        <div class="min-title">
          <span>停车场收费数量</span>
        </div>
        <div class="echart wenzi">
          <div class="gun">
            <span>小型车</span>
            <span>中型车</span>
            <span>大型车</span>
          </div>
          <div id="FontScroll" class="myscroll">
            <ul>
              <li>
                <div class="fontInner clearfix">
                  <span>253万</span>
                  <span>65万</span>
                  <span>182万</span>
                </div>
              </li>
              <li>
                <div class="fontInner clearfix">
                  <span>253万</span>
                  <span>65万</span>
                  <span>182万</span>
                </div>
              </li>
              <li>
                <div class="fontInner clearfix">
                  <span>253万</span>
                  <span>65万</span>
                  <span>182万</span>
                </div>
              </li>
              <li>
                <div class="fontInner clearfix">
                  <span>253万</span>
                  <span>65万</span>
                  <span>182万</span>
                </div>
              </li>
              <li>
                <div class="fontInner clearfix">
                  <span>253万</span>
                  <span>65万</span>
                  <span>182万</span>
                </div>
              </li>
              <li>
                <div class="fontInner clearfix">
                  <span>253万</span>
                  <span>65万</span>
                  <span>182万</span>
                </div>
              </li>
              <li>
                <div class="fontInner clearfix">
                  <span>253万</span>
                  <span>65万</span>
                  <span>182万</span>
                </div>
              </li>
              <li>
                <div class="fontInner clearfix">
                  <span>253万</span>
                  <span>65万</span>
                  <span>182万</span>
                </div>
              </li>
              <li>
                <div class="fontInner clearfix">
                  <span>253万</span>
                  <span>65万</span>
                  <span>182万</span>
                </div>
              </li>
              <li>
                <div class="fontInner clearfix">
                  <span>253万</span>
                  <span>65万</span>
                  <span>182万</span>
                </div>
              </li>
              <li>
                <div class="fontInner clearfix">
                  <span>253万</span>
                  <span>65万</span>
                  <span>182万</span>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="boxfoot"></div>
      </div>
      <!--右边第二部分-->
      <div class="right_content public">
        <div class="min-title">
          <span>抓拍车辆</span>
        </div>
        <div id="chart_3" style="width: 100%; height: 100%"></div>
        <div class="boxfoot"></div>
      </div>
      <!--右边第三部分-->
      <div class="right_bottom public">
        <div class="min-title">
          <span>车辆类型</span>
        </div>
        <div
          id="echarts_2"
          style="width: 100%; height: 100%; padding-top: 10px"
        ></div>
        <div class="boxfoot"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "rightPage",
  data() {
    return {};
  },
};
</script>

<style scoped lang="less">
.data_right {
  width: 24%;
  height: 100%;
}
.data_right .right_top {
  width: 100%;
  height: 360px;
  /* background: green; */
}
.data_right .right_top .right_info {
  width: 100%;
  height: 65%;
  border: 1px solid #20558b;
  position: relative;
  margin-bottom: 35px;
}
.wenzi {
  margin-top: 30px;
}

.gun span {
  display: block;
  float: left;
  height: 20px;
  width: 33%;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #61d2f7;
  text-align: center;
  margin-bottom: 10px;
}
#FontScroll {
  width: 100%;
  height: 160px;
  overflow: hidden;
  margin-top: 10px;
}
#FontScroll ul li {
  height: 38px;
  width: 100%;
  color: #ffffff;
  text-align: center;
  line-height: 38px;
  border-bottom: 1px dashed #404040;
  overflow: hidden;
}
#FontScroll ul li:nth-child(1) {
  /*background-color: #072951;*/
  box-shadow: -10px 0px 15px #034c6a inset,
    /*左边阴影*/ 10px 0px 15px #034c6a inset;
}
#FontScroll ul li:hover {
  box-shadow: -10px 0px 15px #034c6a inset,
    /*左边阴影*/ 10px 0px 15px #034c6a inset;
  cursor: pointer;
}

.fontInner span {
  display: inline-block;
  width: 31%;
}

.data_right .right_top .right_content {
  width: 100%;
  height: 180px;
  border: 1px solid #20558b;
  position: relative;
  margin-bottom: 35px;
}
.data_right .right_top .right_bottom {
  width: 100%;
  height: 180px;
  border: 1px solid #20558b;
  position: relative;
  margin-bottom: 20px;
}

</style>
